<template>
    <div>
        <el-row v-if="onlyCheckShow" :gutter="10" class="marginBottom14" type="flex" justify="end">
            <el-col :span="1.5" style="margin-top: 10px;">
                <el-button v-if="noOpertaion" @click="handleClick('updateInfo')"
                    class="pms-zr-button-primary">更新</el-button>
                <el-button @click="handleClick('checkVersionInfo')" class="pms-zr-button-primary">查看版本记录</el-button>
            </el-col>
        </el-row>
        <div class="dialog-title">
            <p style="min-width: 200px;" v-for="(item, index) in dialogInfoOption" :key="index">{{ item.label }}
                <span class="dialog-span">{{ projectInfoObj[item.prop] }}</span>
            </p>
        </div>
        <!-- 通用表格 -->
        <ReceiptTable :mergeFields="calcmergeFields" :columns="calcColumns" :checkTypeObj="calcCheckTypeObj"
            :tableData="tableData" :onlyCheckShow="onlyCheckShow" :forbiddenShow="forbiddenShow"
            :currentNode="currentNode" :specalTag="specalTag" :noOpertaion="noOpertaion" />
        <!-- 整改表格-->
        <div style="margin-top: 20px;" v-if="showEdit || !onlyCheckShow">
            <ReceiptTable :checkTypeObj="addCheckList" v-if="addtableData.length > 0" :columns="addRectifyOption"
                :tableData="addtableData" :currentNode="currentNode" :onlyCheckShow="onlyCheckShow"
                :rectifyShow="rectifyShow" :noZgEdit="!noOpertaion||noEditsQuery">
                <template #controlsBtn>
                    <el-table-column label="操作" align="center" width="100" v-if="onlyCheckShow">
                        <template slot-scope="scope">
                            <el-button :disabled="!noOpertaion||noEditsQuery" type="text" @click="delectSingleInfo(scope.row, scope.$index)">删除</el-button>
                        </template>
                    </el-table-column>
                </template>
            </ReceiptTable>
        </div>
        <el-row v-if="showEdit && onlyCheckShow" :gutter="10" class="marginBottom14" type="flex" justify="start">
            <el-col :span="1.5" style="color:#02A7F0" v-if="noOpertaion">
                <p style="cursor: pointer;" @click="addRectify" v-if="this.tableData.length!==0">+ 添加整改项</p>
            </el-col>
        </el-row>
        <div class="dialog-sign" v-if="!showEdit && onlyCheckShow">
            <div class="dialog-sign-left">
                <p style="min-width: 230px;">项目管理人员：(签字)&nbsp;&nbsp;<span class="dialog-span">{{
                    projectInfoObj.pmSignature }}
                    </span>
                </p>
                <p style="margin: auto;min-width: 230px">签字时间：<span style="color: #606266">{{
                    projectInfoObj.pmSignatureDate
                        }}</span></p>
                <p></p>

            </div>
            <div class="dialog-sign-left">
                <p style="min-width: 230px;">维护管理人员：(签字)&nbsp;&nbsp;<span class="dialog-span">{{
                    projectInfoObj.mmSignature
                        }}</span></p>
                <p style="margin: auto;min-width: 230px;">签字时间：<span style="color: #606266">{{
                    projectInfoObj.mmSignatureDate
                        }}</span></p>
                <p></p>
            </div>
        </div>
        <el-row v-if="onlyCheckShow" :gutter="10" class="marginBottom14" type="flex" justify="center">
            <el-col :span="1.5" v-if="noOpertaion">
                <el-button style="margin: 10px 0;" class="pms-button-primary" @click="saveInfo" v-if="this.tableData.length!==0">保存</el-button>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import ReceiptTable from '../components/receiptTable.vue'
import {
    dialogInfoOption,
    addRectifyOption,
    commonFormOption,
    commonCheckTypeObj,
    mergeFields,
    CheckListC
} from '../option'
import { MAIN_FILE_RECTIFY_FINISHED } from '../enumConfig'
import {
    getHandoverInfoForm,
    saveHandoverInfo,
    updateHandoverInfo
} from '@/api/acceptance/index'
export default {
    name: 'ReceiptForm',
    components: { ReceiptTable },
    props: {
        // 项目节点
        currentNode: {
            type: String,
            default: ''
        },
        // 当前的表单类型
        currentType: {
            type: String,
            default: ''
        },
        // 整改问题清单
        specalTag: {
            type: String,
            default: ''
        },
        // 查看版本进来的按钮都不显示
        onlyCheckShow: {
            type: Boolean,
            default: true
        },
        // 是否打开弹窗
        showCall: {
            type: Boolean,
            default: false
        },
        // 弹窗参数
        dialogParams: {
            type: Object,
            default: () => ({})
        },
        // 正常显示的
        normalShow: {
            type: Boolean,
            default: false
        },
        // RT1 整改清单
        rectifyShow: {
            type: Boolean,
            default: false
        }
    },
    computed: {
        calcColumns() {
            if (!this.currentNode && !this.currentType) {
                return
            }
            const filterList = this.commonFormOption[this.currentNode][this.currentType]?.filter(item => item.label !== '是否完成整改')
            if (filterList === undefined) {
                return
            }
            return this.currentNode === 'F12' && this.specalTag === '05' ? this.commonFormOption[this.currentNode][this.currentType] : filterList
        },
        calcCheckTypeObj() {
            return this.commonCheckTypeObj[this.currentNode][this.currentType]
        },
        calcmergeFields() {
            return this.mergeFields[this.currentNode][this.currentType]
        },
        showEdit() {
            return this.currentNode === 'F12' && this.specalTag === '05'
        },
        forbiddenShow() {
            let result = ''
            if (this.currentType === '01') {
                result = '01'
            } else if (this.currentType === '04') {
                result = '04'
            } else if (this.currentType === '01' && this.specalTag === '05') {
                result = '01'
            } else {
                this.currentType === '04'
            }
            return result
        },
        noOpertaion() {
            return this.$route.query.type === 'todo' && ((this.normalShow && this.specalTag !== '05') || this.rectifyShow)
        },
        noEditsQuery(){
            return this.$route.query.type==='1'
        },
    },
    watch: {
        showCall: {
            handler(val, oldVal) {
                if (val) {
                    this.getInitInfo()
                }
            },
            deep: true,
            immediate: true,
        },
        currentType: {
            handler(val, oldVal) {
                if (this.specalTag === '05') {
                    this.getInitInfo()
                }
            },
            deep: true,
            immediate: true,
        },
    },
    data() {
        return {
            dialogInfoOption,
            addRectifyOption,
            commonFormOption,
            commonCheckTypeObj,
            mergeFields,
            addCheckList: {
                [MAIN_FILE_RECTIFY_FINISHED]: CheckListC
            },
            addtableData: [],
            tableData: [

            ],
            showBtnDisabled: false,
            projectInfoObj: {
                prjCode: '',
                siteId: '',
                siteName: '',
                pmSignature: '',
                mmSignature: '',
                pmSignatureDate: '',
                mmSignatureDate: '',
                handoverType: '',
                bizSeq: ""
            },
        }
    },
    methods: {
        async getNewTableData(result) {
            if (!result?.data) {
                return
            }
            const { data, prjCode, siteId, siteName, pmSignature, mmSignature, pmSignatureDate, mmSignatureDate, handoverType, bizSeq } = result?.data
            this.projectInfoObj.prjCode = prjCode
            this.projectInfoObj.siteId = siteId
            this.projectInfoObj.siteName = siteName
            this.projectInfoObj.pmSignature = pmSignature
            this.projectInfoObj.mmSignature = mmSignature
            this.projectInfoObj.pmSignatureDate = pmSignatureDate
            this.projectInfoObj.mmSignatureDate = mmSignatureDate
            this.projectInfoObj.handoverType = handoverType
            this.projectInfoObj.bizSeq = bizSeq
            // 基本表格
            const res = data?.filter(item => +item.rowType !== 1)
            // 新增整改内容
            const res1 = data?.filter(item => +item.rowType === 1)
            this.tableData = res
            this.addtableData = res1
        },
        async getInitInfo() {
            this.tableData = []
            try {
                // 05整改问题清单特殊处理
                const params = {
                    ...this.dialogParams,
                    detailHandoverType: this.dialogParams.handoverType,
                    handoverType: '5',
                    operType: this.currentNode
                }
                const result = await getHandoverInfoForm(this.specalTag === '05' ? params : {...this.dialogParams, operType: this.currentNode})
                await this.getNewTableData(result)
            } catch (error) {
                console.log(error);
            }
        },
        handleClick(item) {
            this.$emit(item)
            if (item === 'updateInfo') {
                this[item]()
            }
        },
        async saveInfo() {
            const params = {
                ...this.dialogParams,
                bizSeq: this.projectInfoObj.bizSeq,
                operType: this.currentNode,
                data: this.tableData.concat(this.addtableData),
                handoverType: this.projectInfoObj.handoverType
            }
            const { code } = await saveHandoverInfo(params)
            if (+code === 200) {
                this.$message.success('保存成功')
                this.addtableData = []
                this.getInitInfo()
            }
        },
        addRectify() {
            this.addtableData.push({
                handoverContent: '',
                rectificationResult: null,
                rowType: 1
            })
            this.addtableData = this.addtableData.map((item, index) => {
                return {
                    ...item,
                    sort: +index
                }
            })
        },
        delectSingleInfo(row, index) {
            this.addtableData = this.addtableData.filter((item, i) => index !== i)
        },
        // 更新信息
        async updateInfo() {
            if (this.showBtnDisabled) {
                return
            }
            const params1 = {
                ...this.dialogParams,
                operType: this.currentNode
            }
            const params2 = {
                ...this.dialogParams,
                detailHandoverType: this.dialogParams.handoverType,
                handoverType: '5',
                operType: this.currentNode
            }

            const result = await updateHandoverInfo(this.specalTag === '05' ? params2 : params1)
            if (+result.code === 200) {
                await this.getNewTableData(result)
                this.$message.success('更新成功')
            }
            this.showBtnDisabled = true
            setTimeout(() => {
                this.showBtnDisabled = false
            }, 5000)
        },
    }
}

</script>
<style scoped lang='scss'>
.dialog-title {
    display: flex;
    width: 100%;
    justify-content: space-between;
    color: red;
    margin-bottom: 10px;
}

.dialog-span {
    color: #606266 !important;
}

.dialog-sign {
    margin-top: 20px;
    width: 100%;

    .dialog-sign-left {
        display: flex;
        align-items: center;
        color: red;
    }
}
</style>